<template>
    <view class="fabric-page">
        <canvas
            ref="canvasRef"
            type="canvas"
            canvas-id="canvas"
            id="canvas"
        ></canvas>
    </view>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Canvas, Path, Rect, FabricImage } from "fabric";
import img1 from "@/assets/paper-trace/1.png";

const canvasRef = ref(null);

onMounted(() => {
    draw();
});

function drawChildAsync(drawFn = () => {}) {
    return new Promise((resolve, reject) => {
        try {
            drawFn();
        } catch (err) {
            reject(err);
        }
    });
}

async function draw() {
    const windowWidth = uni.getSystemInfoSync().windowWidth;
    const canvas = new Canvas(canvasRef.value?.$el?.firstChild, {
        backgroundColor: "#eee",
        enableRetinaScaling: true,
        width: windowWidth,
        height: windowWidth,
        selection: false,
    });
    // canvas.enableRetinaScaling(true);
    // 自动处理双指缩放
    canvas.on("touch:gesture", (e) => {
        // if (e.self) return; // 避免事件冒泡
        if (e.touches.length === 2) {
            e.self = true; // 标记为已处理
            canvas.zoomToPoint({ x: e.center.x, y: e.center.y }, e.scale);
        }
    });
    // 添加背景图
    const addImage = () => {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.onload = function () {
                const imgObject = new FabricImage(img, {
                    left: 0,
                    top: 0,
                    scaleX: windowWidth / img.width,
                    scaleY: windowWidth / img.height,
                    width: img.width,
                    height: img.height,
                });
                canvas.add(imgObject);
                resolve();
            };
            img.onerror = reject;
            img.src = img1;
        });
    };
    // await addImage();

    // 创建波浪路径数据
    const wavePoints = [];
    const startX = 50;
    const startY = 100;
    const amplitude = 2; // 振幅
    const wavelength = 20; // 波长

    // 通过正弦函数生成波浪路径点
    for (let x = 0; x < 100; x += 2) {
        // 步长越小，曲线越平滑
        const y = amplitude * Math.sin((x * Math.PI) / (wavelength / 2));
        wavePoints.push({ x: startX + x, y: startY + y });
    }

    // 创建路径对象
    const path = new Path(createPathString(wavePoints), {
        fill: null, // 无填充
        stroke: "#00ff00", // 绿色线条
        strokeWidth: 2, // 线宽8像素
        strokeLineCap: "round", // 线条端点圆角
        selectable: false, // 禁止选中
        hoverCursor: "default",
    });

    // 将路径添加到画布
    canvas.add(path);

    // 工具函数：将点数组转换为SVG路径字符串
    function createPathString(points) {
        return points
            .map((p, i) => (i === 0 ? `M ${p.x} ${p.y}` : `L ${p.x} ${p.y}`))
            .join(" ");
    }

    const rect = new Rect({
        width: 100,
        height: 20,
        left: 50,
        top: 50,
        fill: "#faa",
        selectable: false,
        hoverCursor: "default",
    });
    canvas.add(rect);
}
</script>
<style lang="scss" scoped></style>
